import React from 'react';
import './Search.css'

class Search extends React.Component{
    constructor(props){
        super(props)
        this.state={
            isShow:false,
            arr:[
                '123',
                '456',
                '789',
                '101',
                '102',
            ],
            arr1:[],
            hoverIndex:-1,
            val:''
        }
    }
    render(){
        return(
            <div>
                <div className="top">
                <input type="text" className="input" placeholder={this.props.placeholder} value={this.state.val} onFocus={()=>{
                    this.setState({
                        isShow:true
                    })
                }}
                onBlur={()=>{
                    this.setState({
                        isShow:false
                    })

                }}
                onKeyDown={(event)=>{
                    if(event.keyCode===40){
                        this.state.hoverIndex++;
                        if(this.state.hoverIndex>this.state.arr.length-1){
                            this.state.hoverIndex=0
                        }
                    }else if(event.keyCode==38){
                        this.state.hoverIndex--;
                        if(this.state.hoverIndex<0){
                            this.state.hoverIndex=this.state.arr.length-1
                        }
                    }
                    this.setState({
                        val:this.state.arr[this.state.hoverIndex],
                        hoverIndex:this.state.hoverIndex
                    })
                }}/><button className="btn">百度一下</button>
                </div>
                <div className={this.state.isShow?'box':'box-hidden'}>
                    {
                        this.state.arr.map((Element,index)=>{
                            return <div className={this.state.hoverIndex==index?'hover':''} onMouseEnter={()=>{
                                this.setState({
                                    hoverIndex:index
                                })
                            }}>
                                <div>{Element}</div>
                                <button className={this.state.hoverIndex==index?'btn-show':'btn-hide'}
                                onMouseDown={(index)=>{
                                    this.setState({
                                        arr1:this.state.arr.splice(index,1)
                                    })
                                    // this.state.arr.splice(index,1)
                                }}>删除</button>
                            </div>
                        })
                    }
                </div>
            </div>
        )
    }
}

export default Search